<template>
    <div class="catalogue-pane">
        <div class="main-title" v-if="showHeader">
            <img class="icon" src="@/assets/images/menu-icon.png" alt="">
            <span>目录</span>
        </div>
        <ul class="list" v-if="list.length">
            <li 
                v-for="item in list" 
                :key="item.catalogueId"
            >
                <!-- 一级的目录 -->
                <template v-if="item.maxDeep === 0">
                    <div class="course-style" v-if="item.catalogueType == 1" @click="toCatalogueDetail(item)">
                        <p class="title">{{ item.catalogueName }}</p>
                        <div class="info">
                            <span class="icon">
                                <span class="type-name">
                                    <img :src="imgSrc(item.tag)" alt="" />
                                    <span>{{formatTypeName(item.tag)}}</span>
                                </span>
                                <!-- <span class="line"></span>
                                <span class="time">{{fmtDuration(item)}}</span> -->
                            </span>
                            <span class="status" v-if="item.courseWare?.finishState == 1 && data.isBuy">已学完</span>
                        </div>
                    </div>
                    <div v-else class="level-title">
                        <p>{{ item.catalogueName }}</p>
                    </div>
                </template>

                <!-- 二级的目录 -->
                <template v-else-if="item.maxDeep === 1">
                    <div class="level-title" @click="changeToggle(item)">
                        <p>{{ item.catalogueName }}</p>
                        <span>
                            <i v-if="item?.children?.length && !item.toggle" class="iconfont icon-zhankaixiala"></i>
                            <i v-if="item?.children?.length && item.toggle" class="iconfont icon-shouqi"></i>
                        </span>
                    </div>
                    <div
                        v-show="item.toggle" 
                        v-for="item_level_2 in item.children ?? []" 
                        :key="item_level_2.catalogueId"
                    >
                        <div class="course-style" v-if="item_level_2.catalogueType == 1" @click="toCatalogueDetail(item_level_2)">
                            <p class="title">{{ item_level_2.catalogueName }}</p>
                            <div class="info" v-if="item_level_2.catalogueType == 1">
                                <span class="icon">
                                    <span class="type-name">
                                        <img :src="imgSrc(item_level_2.tag)" alt="" />
                                        <span>{{formatTypeName(item_level_2.tag)}}</span>
                                    </span>
                                    <!-- <span class="line"></span>
                                    <span class="time">{{fmtDuration(item_level_2)}}</span> -->
                                </span>
                                <span class="status" v-if="item_level_2.courseWare?.finishState == 1 && data.isBuy">已学完</span>
                            </div>
                        </div>
                        <div v-else class="cata-2">
                            <p>{{ item_level_2.catalogueName }}</p>
                        </div>
                    </div>
                </template>

                <!-- 三级的目录 -->
                <template v-else-if="item.maxDeep === 2">
                    <div class="level-title" @click="changeToggle(item)">
                        <p>{{ item.catalogueName }}</p>
                        <span>
                            <i v-if="item?.children?.length && !item.toggle" class="iconfont icon-zhankaixiala"></i>
                            <i v-if="item?.children?.length && item.toggle" class="iconfont icon-shouqi"></i>
                        </span>
                    </div>

                    <div v-for="item_level_2 in item.children ?? []" :key="item_level_2.catalogueId" v-show="item.toggle">
                        <div v-if="item_level_2.catalogueType == 1"  class="course-style" @click="toCatalogueDetail(item_level_2)">
                            <p class="title">{{ item_level_2.catalogueName }}</p>
                            <div class="info">
                                <span class="icon">
                                    <span class="type-name">
                                        <img :src="imgSrc(item_level_2.tag)" alt="" />
                                        <span>{{formatTypeName(item_level_2.tag)}}</span>
                                    </span>
                                    <!-- <span class="line"></span>
                                    <span class="time">{{fmtDuration(item_level_2)}}</span> -->
                                </span>
                                <span class="status" v-if="item_level_2.courseWare?.finishState == 1 && data.isBuy">已学完</span>
                            </div>
                        </div>
                        <div v-else class="cata-2">
                            <p>{{ item_level_2.catalogueName }}</p>
                        </div>

                        <div v-for="item_level_3 in item_level_2.children ?? []" :key="item_level_3.catalogueId">
                            <div class="course-style" v-if="item_level_3.catalogueType == 1" @click="toCatalogueDetail(item_level_3)">
                                <p class="title">{{ item_level_3.catalogueName }}</p>
                                <div class="info">
                                    <span class="icon">
                                        <span class="type-name">
                                            <img :src="imgSrc(item_level_3.tag)" alt="" />
                                            <span>{{formatTypeName(item_level_3.tag)}}</span>
                                        </span>
                                        <!-- <span class="line"></span>
                                        <span class="time">{{fmtDuration(item_level_3)}}</span> -->
                                    </span>
                                    <span class="status" v-if="item_level_3.courseWare?.finishState == 1 && data.isBuy">已学完</span>
                                </div>
                            </div>
                            <div class="cata-3" v-else>
                                <p>{{ item_level_3.catalogueName }}</p>
                            </div>
                        </div>
                    </div>
                </template>

                <!-- 四级的目录 -->
                <template v-else-if="item.maxDeep === 3">
                    <div class="level-title" @click="changeToggle(item)">
                        <p class="title">{{ item.catalogueName }}</p>
                        <span>
                            <i v-if="item?.children?.length && !item.toggle" class="iconfont icon-zhankaixiala"></i>
                            <i v-if="item?.children?.length && item.toggle" class="iconfont icon-shouqi"></i>
                        </span>
                    </div>
                    <div v-show="item.toggle">
                        <div v-for="item_level_2 in item.children ?? []" :key="item_level_2.catalogueId">
                            <div v-if="item_level_2.catalogueType == 1"  class="course-style" @click="toCatalogueDetail(item_level_2)">
                                <p>{{ item_level_2.catalogueName }}</p>
                                <div class="info">
                                    <span class="icon">
                                        <span class="type-name">
                                            <img :src="imgSrc(item_level_2.tag)" alt="" />
                                            <span>{{formatTypeName(item_level_2.tag)}}</span>
                                        </span>
                                        <!-- <span class="line"></span>
                                        <span class="time">{{fmtDuration(item_level_2)}}</span> -->
                                    </span>
                                    <span class="status" v-if="item_level_2.courseWare?.finishState == 1 && data.isBuy">已学完</span>
                                </div>
                            </div>
                            <div v-else class="cata-2">
                                <p>{{ item_level_2.catalogueName }}</p>
                            </div>

                            <div v-for="item_level_3 in item_level_2.children ?? []" :key="item_level_3.catalogueId">
                                <div class="course-style" v-if="item_level_3.catalogueType == 1" @click="toCatalogueDetail(item_level_3)">
                                    <p class="title">{{ item_level_3.catalogueName }}</p>
                                    <div class="info">
                                        <span class="icon">
                                            <span class="type-name">
                                                <img :src="imgSrc(item_level_3.tag)" alt="" />
                                                <span>{{formatTypeName(item_level_3.tag)}}</span>
                                            </span>
                                            <!-- <span class="line"></span>
                                            <span class="time">{{fmtDuration(item_level_3)}}</span> -->
                                        </span>
                                        <span class="status" v-if="item_level_3.courseWare?.finishState == 1 && data.isBuy">已学完</span>
                                    </div>
                                    
                                </div>
                                <div class="cata-3" v-else>
                                    <p>{{ item_level_3.catalogueName }}</p>
                                </div>
                                <template v-if="item_level_2.maxDeep === 2">
                                    <template v-for="item_level_4 in item_level_3.children ?? []" :key="item_level_4.catalogueId">
                                        <div class="course-style" v-if="item_level_4.catalogueType == 1" @click="toCatalogueDetail(item_level_4)">
                                            <p class="title">{{ item_level_4.catalogueName }}</p>
                                            <div class="info">
                                                <span class="icon">
                                                    <span class="type-name">
                                                        <img :src="imgSrc(item_level_4.tag)" alt="" />
                                                        <span>{{formatTypeName(item_level_4.tag)}}</span>
                                                    </span>
                                                    <!-- <span class="line"></span>
                                                    <span class="time">{{fmtDuration(item_level_4)}}</span> -->
                                                </span>
                                                <span class="status" v-if="item_level_4.courseWare?.finishState == 1 && data.isBuy">已学完</span>
                                            </div>
                                        </div>
                                        <!-- <div v-else class="level-1">
                                            <div class="level-tag">{{ item_level_4.catalogueName }}</div>
                                            <p class="noData">暂无内容</p>
                                        </div> -->
                                    </template>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>
            </li>
        </ul>
        <div class="no-data" v-else>
            <empty :image="require('@/assets/images/empty/no-homework.png')" addTip="暂无目录" :size="[260, 160]"/>
        </div>
    </div>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue';
import {useRoute} from 'vue-router'
import {useStore} from 'vuex';
import {pageJump} from '@/global/location-transfer';
import Empty from '@/components/empty.vue'
import { fmtTime } from '@/lib/tools.js';

const route = useRoute();
const store = useStore();
const props = defineProps({
    data: {
        default: () => {},
        type: Object
    },
    list: {
        default: () => [],
        type: Array
    },
    showHeader: {
        default: true,
        type: Boolean
    }
})

const emit = defineEmits(['to-detail'])
// 跳转课件详情
function toCatalogueDetail(item) {
    emit('to-detail', item)
}

function changeToggle(item) {
    item.toggle = !item.toggle
}
// 格式化时长
function fmtDuration (data) {
    return data.courseWare?.duration ? fmtTime(data.courseWare.duration) : '00:00:00';
}

const fileTypes = ['video']
const fileNameMap = {
    video: '视频',
    other: '文档'
}
const imgs = {
    'others': require('@/assets/images/catalogue-icons/doc-black.png'),
    'video': require('@/assets/images/catalogue-icons/video-black.png'),
}
function imgSrc(str) {
    return fileTypes.indexOf(str) === -1 ? imgs.others: imgs[str]
}

function formatTypeName(tag){
    return fileNameMap.hasOwnProperty(tag) ? fileNameMap[tag] : fileNameMap.other
}

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.catalogue-pane {
    background:  #FFFFFF;
    padding: 12px 15px;
    box-sizing: border-box;
    .main-title{
        font-size: 16px;
        font-weight: 600;
        color: #171A1D;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .icon{
            width:16px;
            height:16px;
            margin-right: 4px;
        }
    }
    .list {
        margin-top: 15px;
        li {
            p {
                font-size: 15px;
                font-weight: 400;
                color: #171A1D;
                line-height: 24px;
                width: 282px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                // margin-left: 7px;
            }
            img {
                // margin-right: 8px;
            }
        }
        .course-style {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-direction: column;
            padding: 15px;
            box-sizing: border-box;
            box-shadow: 0px 3px 6px 0px rgba(140,149,179,0.08);
            border-radius: 2px;
            border: 1px solid #EFF0F2;
            margin: 12px 0;
            .title{
                font-size: 15px;
                font-weight: 400;
                color: #171A1D;
                margin-bottom: 4px;
            }
            .info{
                display: inline-flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                .icon{
                    font-size: 13px;
                    font-weight: 400;
                    color: #A2A3A4;
                    display: inline-flex;
                    align-items: center;
                    justify-content: space-between;
                    img{
                        width:13px;
                        height:13px;
                    }
                    .line{
                        width: 1px;
                        height: 12px;
                        background-color: #A2A3A4;
                        margin: 0 10px;
                    }
                }
                .type-name{
                    display: inline-flex;
                    align-items: center;
                }
                .status{
                    font-size: 13px;
                    font-weight: 600;
                    color: #6E7074;
                }
            }
            
            .noData {
                font-size: 15px;
                font-weight: 400;
                color: #CCCCCC;
                line-height: 24px;
            }
        }
        .level-long-tag {
            font-size: 12px;
            font-weight: 400;
            color: #6B7587;
            line-height: 18px;
            background: #EFF0F2;
            border-radius: 2px;
            padding: 0 5px;
            margin: 0 15px;
            margin-bottom: 6px;
        }
        .level-title {
            display: flex;
            align-items: center;
            // margin-bottom: 12px;
            margin-top: 20px;
            justify-content: space-between;
            p {
                font-size: 15px;
                font-weight: 600;
                color: #0084F6;
            }
            i{
                color: #A2A3A4;
                font-size: 10px; 
            }
            &:first-child{
                margin-top: 15px;
            }
        }
        .cata-2 {
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #F5F5F5;
            border-radius: 2px;
            margin: 15px 0 15px;
            p {
                font-weight: 600;
            }
            i {
                color: #A2A3A4;
                font-size: 10px;
            }
        }
        .level-toggle:active {
            background: #f2f3f5;
        }
        .cata-3 {
            padding-left: 15px;
            margin-bottom: 6px;
            p {
                font-weight: 600;
                // display: flex;
                align-items: center;
                
                &::before {
                    display: inline-block;
                    content: "";
                    width: 6px;
                    height: 6px;
                    background: #171A1D;
                    border-radius: 50%;
                    margin-right: 6px;
                }
            }
        }
    }
}
</style>